<template>
<div>
    <div v-if="powerData">
        <div class="comImg">
            <p>PPEX</p>
            <p>{{$t('power[0]')}}</p>
            <p>{{$t('power[1]')}}</p>
            <p>{{$t('power[2]')}}</p>
        </div>
        <div class="comDiv1">
            <div class="comDiv1Div1">
                <p>{{$t('power[3]')}}</p>
                <p>{{$t('power[4]')}}</p>
            </div>
            <div class="xian"></div>
            <div class="comDiv1Div2">
                <p>{{$t('power[5]')}}</p>
                <p>{{powerData.top_param.hold_num}}</p>
            </div>
            <div class="xian"></div>
            <div class="comDiv1Div2">
                <p>{{$t('power[6]')}}(T)</p>
                <p>{{powerData.top_param.fx_power}}</p>
            </div>
            <div class="xian"></div>
            <div class="comDiv1Div2">
                <p>{{$t('power[7]')}}(BTC)</p>
                <p>{{powerData.top_param.release_profit}}</p>
            </div>
            <div class="xian"></div>
            <div class="comDiv1Div2">
                <p>{{$t('power[8]')}}(CNY)</p>
                <p>{{powerData.top_param.to_cny}}</p>
            </div>
        </div>
        <div style="height:100px"></div>
        <div class="comDiv2" v-for="(item,index) in powerData.list" v-if="parseInt(item.status)==1">
            <img class="comDiv2Img" :src="item.icon" alt />
            <div class="comDiv2Div1">
                <p class="comDiv2P1">{{item.name}}</p>
                <p class="comDiv2P2">{{$t('power[9]')}}</p>
                <div class="comDiv2Div2">
                    <p>{{$t('power[10]')}}</p>
                    <p>{{$t('power[11]')}}(T)</p>
                </div>
                <div class="comDiv2Div3">
                    <p>{{item.product_cycle}}</p>
                    <p>{{item.fx_num}}</p>
                </div>
                <div class="comDiv2Div2">
                    <p>{{$t('power[12]')}}(BTC/T)</p>
                    <p>{{$t('power[13]')}}</p>
                </div>
                <div class="comDiv2Div3">
                    <p>{{item.day_get}}</p>
                    <p>{{item.sy_date}}</p>
                </div>
            </div>
            <div class="comDiv2Div4">
                <div class="comDiv2Div5">
                    <p class="comDiv2Div5P1">{{$t('power[14]')}}</p>
                    <p class="comDiv2Div5P2">
                        {{$t('power[15]')}}
                        <i>{{item.fx_num}}</i>T
                    </p>
                </div>
                <div class="comDiv2Div6">
                    <p>{{item.product_money}}</p>
                    <p>USDT{{item.product_money_cny?'≈'+item.product_money_cny+'CNY':''}}</p>
                </div>
                <div class="comDiv2Div7">
                    <img :src="require('_img/jian.png')" alt />
                    <div class="Inp">1T</div>
                    <img :src="require('_img/jia.png')" alt />
                </div>
                <p class="comDiv2Div5P3">{{$t('power[16]')}} {{item.day_get}} BTC {{item.day_get_cny?'≈'+item.day_get_cny+'CNY':''}}</p>
                <div class="comDiv2Div8">{{$t('power[17]')}}</div>
            </div>
        </div>
        <div class="comDiv3">
            <div class="comDiv4" v-for="(item,index) in powerData.list" v-if="parseInt(item.status)!==1">
                <div class="zhezhao">
                    <div>{{parseInt(item.status)==2?$t('power[18]'):$t('power[19]')}}</div>
                </div>
                <p class="comDiv4p1">{{item.name}}</p>
                <p class="comDiv4p2">{{$t('power[9]')}}</p>
                <div class="comDiv4Div1">
                    <p>{{$t('power[10]')}}</p>
                    <p>{{$t('power[11]')}}(T)</p>
                </div>
                <div class="comDiv4Div2">
                    <p>{{item.product_cycle}}</p>
                    <p>{{item.fx_num}}</p>
                </div>
                <div class="comDiv4Div1">
                    <p>{{$t('power[12]')}}(BTC/T)</p>
                    <p>{{$t('power[13]')}}</p>
                </div>
                <div class="comDiv4Div2">
                    <p>{{item.day_get}}</p>
                    <p>{{item.sy_date}}</p>
                </div>
                <div class="comDiv4Div3">
                    <div class="comDiv4Div3Left">
                        <p>
                            <i>{{item.product_money}}</i>USDT
                            <br />{{item.product_money_cny?'≈'+item.product_money_cny+'CNY':''}}
                        </p>
                    </div>
                    <div class="comDiv4Div3Right">{{$t('power[17]')}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    power
} from "@/api/software";
export default {
    data() {
        return {
            powerData: null
        };
    },
    created() {
        power()
            .then(res => {
                
                    this.powerData = res;
                 
            })
            .catch(res => { 
            });
    }
};
</script>

<style lang="less">
.comDiv3 {
    width: 1380px;
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto;

    .comDiv4 {
        width: 410px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 9px 1px rgba(26, 26, 26, 0.06);
        border-radius: 10px;
        padding: 35px 30px;
        margin: 30px 25px;
        position: relative;

        .zhezhao {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            z-index: 999;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            div {
                font-size: 38px;
                color: rgba(255, 39, 4, 1);
            }
        }

        .comDiv4p1 {
            font-size: 20px;
            color: rgba(34, 34, 34, 1);
        }

        .comDiv4p2 {
            font-size: 14px;
            color: rgba(34, 34, 34, 1);
            margin-top: 12px;
        }

        .comDiv4Div1,
        .comDiv4Div2,
        .comDiv4Div3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .comDiv4Div1 {
            font-size: 16px;
            color: rgba(102, 102, 102, 1);
            margin-top: 25px;
        }

        .comDiv4Div2 {
            font-size: 26px;
            color: rgba(102, 102, 102, 1);
            margin-top: 12px;
        }

        .comDiv4Div3 {
            margin-top: 35px;

            .comDiv4Div3Left {
                p {
                    font-size: 16px;
                    color: rgba(102, 102, 102, 1);
                }

                i {
                    font-size: 26px;
                    font-weight: bold;
                    color: rgba(102, 102, 102, 1);
                }
            }

            .comDiv4Div3Right {
                width: 120px;
                height: 50px;
                background: rgba(238, 238, 238, 1);
                border: 1px solid rgba(102, 102, 102, 1);
                border-radius: 10px;
                font-size: 18px;
                color: rgba(102, 102, 102, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.comDiv2 {
    display: flex;
    width: 1280px;
    height: 300px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 9px 1px rgba(26, 26, 26, 0.06);
    border-radius: 10px;
    margin: 100px auto;
    align-items: center;
    justify-content: space-between;

    .comDiv2Div4 {
        width: 400px;
        height: 300px;
        background: rgba(58, 128, 244, 1);
        border-radius: 0px 10px 10px 0px;
        padding: 23px;

        .comDiv2Div5P3 {
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            margin-top: 13px;
            margin-bottom: 13px;
        }

        .comDiv2Div8 {
            width: 356px;
            height: 50px;
            background: rgba(255, 255, 255, 1);
            border-radius: 6px;
            font-size: 18px;
            color: rgba(58, 128, 244, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        .comDiv2Div7 {
            width: 356px;
            height: 50px;
            background: rgba(255, 255, 255, 1);
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .Inp {
                width: 250px;
                font-size: 16px;
                color: rgba(34, 34, 34, 1);
                align-items: center;
                border: none;
                text-align: center;
            }

            img {
                width: 20px;
                height: 20px;
                margin: 0 16px;
            }
        }

        .comDiv2Div6 {
            display: flex;
            align-items: flex-end;
            margin: 10px 0;

            p:nth-child(1) {
                font-size: 36px;
                color: rgba(255, 255, 255, 1);
            }

            p:nth-child(2) {
                font-size: 18px;
                color: rgba(255, 255, 255, 1);
                margin-left: 10px;
            }
        }

        .comDiv2Div5 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .comDiv2Div5P1 {
                font-size: 26px;
                color: rgba(254, 199, 32, 1);
            }

            .comDiv2Div5P2 {
                font-size: 20px;
                color: rgba(255, 255, 255, 1);
                display: flex;
                align-items: center;

                i {
                    height: 22px;
                    background: rgba(254, 199, 32, 1);
                    padding: 0 10px;
                    color: #3a80f4;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                i:nth-child(1) {
                    margin-left: 20px;
                }

                i:last-child {
                    margin-right: 20px;
                }
            }
        }
    }

    .comDiv2Img {
        width: 295px;
        height: 295px;
        margin-top: -20px;
    }

    .comDiv2Div1 {
        width: 550px;
        padding: 30px;

        .comDiv2P1 {
            font-size: 20px;
            color: rgba(34, 34, 34, 1);
            margin-bottom: 13px;
        }

        .comDiv2P2 {
            font-size: 14px;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 24px;
        }
    }

    .comDiv2Div2 {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;

        p {
            font-size: 16px;
            color: rgba(34, 34, 34, 1);
        }
    }

    .comDiv2Div3 {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;

        p {
            font-size: 26px;
            color: rgba(34, 34, 34, 1);
        }
    }
}

.comImg {
    width: 100%;
    height: 527px;
    background-image: url("../../assets/img/bgkc.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    p:nth-child(1) {
        font-size: 24px;
        color: rgba(249, 249, 249, 1);
        margin-top: 100px;
    }

    p:nth-child(2) {
        font-size: 32px;
        color: rgba(117, 167, 255, 1);
        margin-top: 16px;
    }

    p:nth-child(3) {
        font-size: 52px;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
        margin-top: 58px;
    }

    p:nth-child(4) {
        font-size: 20px;
        color: rgba(238, 238, 238, 1);
        margin-top: 24px;
    }
}

.comDiv1 {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 9px 1px rgba(26, 26, 26, 0.06);
    border-radius: 10px;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    width: 1300px;
    margin: -80px auto;

    .xian {
        width: 1px;
        height: 77px;
        background: rgba(238, 238, 238, 1);
        margin: 0 40px;
    }

    .comDiv1Div1 {
        display: flex;
        flex-direction: column;
        width: 318px;
        margin: 0;
        padding: 0;

        p {
            width: 100%;
        }

        p:nth-child(1) {
            font-size: 24px;
            font-weight: bold;
            color: rgba(58, 128, 244, 1);
            margin-bottom: 20px;
        }

        p:nth-child(2) {
            font-size: 16px;
            color: rgba(34, 34, 34, 1);
            line-height: 24px;
        }
    }

    .comDiv1Div2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 0;

        p:nth-child(1) {
            font-size: 16px;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 20px;
        }

        p:nth-child(2) {
            font-size: 26px;
            color: rgba(58, 128, 244, 1);
        }
    }
}
</style>
